<template>
  <div class="mac-dock">
    <div class="dock-container">
      <!-- 左侧渐变遮罩（模拟Dock栏两端融合效果） -->
      <div class="dock-fade left"></div>
      
      <div class="app-list">
        <div
          v-for="(app, index) in apps"
          :key="app.id"
          class="app-item"
          :style="{'--scale': app.scale}"
          @mouseenter="handleMouseEnter(index)"
          @mouseleave="handleMouseLeave"
          @click="handleAppClick(app)"
        >
          <!-- 图标容器（用于阴影和缩放层级） -->
          <div class="icon-wrapper">
            <SvgIcon 
              :name="app.icon" 
              class="app-icon" 
              :class="{ active: app.active }" 
            />
          </div>
          
          <!-- 应用名称提示（macOS风格气泡） -->
          <div v-if="app.showName" class="app-name">
            {{ app.name }}
          </div>
          
          <!-- 活跃状态指示器（底部横线，macOS特色） -->
          <div v-if="app.active" class="app-indicator"></div>
        </div>
      </div>
      
      <!-- 右侧渐变遮罩 -->
      <div class="dock-fade right"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';

interface AppInfo {
  id: string;
  name: string;
  icon: string; // SvgIcon的name属性
  scale: number;
  showName: boolean;
  active: boolean;
  windowId?: number;
}

const apps = ref<AppInfo[]>([
  { id: 'finder', name: 'Finder', icon: 'buou', scale: 1, showName: false, active: true },
  { id: 'safari', name: 'Safari', icon: 'buou', scale: 1, showName: false, active: false },
  { id: 'mail', name: '邮件', icon: 'buou', scale: 1, showName: false, active: false },
  { id: 'wechat', name: '微信', icon: 'buou', scale: 1, showName: false, active: false },
  { id: 'settings', name: '系统设置', icon: 'buou', scale: 1, showName: false, active: false },
]);

// 鼠标进入逻辑（更细腻的缩放过渡）
const handleMouseEnter = (index: number) => {
  const screenWidth = window.innerWidth;
  const maxScale = screenWidth < 768 ? 1.5 : 1.7; // 大屏更大缩放比例

  apps.value.forEach((app, i) => {
    const distance = Math.abs(i - index);
    // 缩放曲线更接近macOS：中心图标放大明显，两侧衰减平缓
    if (distance === 0) {
      app.scale = maxScale;
      app.showName = true;
    } else if (distance === 1) {
      app.scale = maxScale - 0.25;
    } else if (distance === 2) {
      app.scale = maxScale - 0.45;
    } else if (distance === 3) {
      app.scale = maxScale - 0.55;
    } else {
      app.scale = 1;
      app.showName = false;
    }
  });
};

const handleMouseLeave = () => {
  apps.value.forEach(app => {
    app.scale = 1;
    app.showName = false;
  });
};

const handleAppClick = (app: AppInfo) => {
  apps.value.forEach(a => a.active = false);
  app.active = true;
  if (app.windowId) {

  } else {
    console.log(`打开应用: ${app.name}`);
  }
};

</script>

<style scoped>
.mac-dock {
  position: fixed;
  bottom: 10px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  padding: 8px 0;
  pointer-events: none;
  z-index: 9999;
  /* 增加底部安全距离（适配macOS Dock默认高度） */
  height: 64px;
  box-sizing: border-box;
}

/* 核心容器：还原macOS毛玻璃效果 */
.dock-container {
  display: flex;
  align-items: center;
  height: 52px; /* macOS Dock标准高度 */
  padding: 0 12px;
  /* 半透明背景+模糊（关键样式） */
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  /* 圆角弧度更接近macOS */
  border-radius: 18px;
  /* 细微边框（macOS隐藏特性，特定角度可见） */
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 2px 30px rgba(0, 0, 0, 0.1);
  pointer-events: auto;
  position: relative;
  width: auto;
  max-width: 85%;
}

/* 两端渐变遮罩（模拟图标溢出时的融合效果） */
.dock-fade {
  position: absolute;
  height: 100%;
  width: 40px;
  z-index: 1;
  pointer-events: none;
}

.dock-fade.left {
  left: 0;
  background: linear-gradient(90deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 100%);
  border-radius: 18px 0 0 18px;
}

.dock-fade.right {
  right: 0;
  background: linear-gradient(270deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 100%);
  border-radius: 0 18px 18px 0;
}

.app-list {
  display: flex;
  align-items: center;
  gap: 11px; /* macOS图标默认间距 */
  position: relative;
  z-index: 2; /* 确保图标在遮罩上方 */
}

.app-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  transform: scale(var(--scale));
  transform-origin: center bottom; /* 缩放原点在底部（macOS特性） */
  cursor: pointer;
  height: 100%;
}

/* 图标容器（用于管理阴影层级） */
.icon-wrapper {
  position: relative;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 应用图标样式 */
.app-icon {
  width: 38px;
  height: 38px;
  /* 图标底色（macOS空白图标默认背景） */
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 10px; /* macOS图标圆角 */
  padding: 4px;
  box-sizing: border-box;
  /* 图标阴影（macOS特色） */
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.2));
  transition: all 0.2s ease;
}

/* 活跃状态图标样式 */
.app-icon.active {
  filter: drop-shadow(0 2px 6px rgba(0, 122, 255, 0.4)); /* 蓝色高亮阴影 */
}

/* 应用名称提示（完全还原macOS气泡） */
.app-name {
  position: absolute;
  bottom: calc(100% + 8px); /* 距离图标底部的距离 */
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 12px;
  background: rgba(40, 40, 40, 0.92); /* macOS气泡背景色 */
  color: #f5f5f7; /* 文字颜色 */
  font-size: 13px;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  /* 气泡阴影 */
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
  z-index: 10;
}

/* 气泡小三角（macOS风格） */
.app-name::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 5px;
  border-style: solid;
  border-color: rgba(40, 40, 40, 0.92) transparent transparent transparent;
}

/* 活跃状态指示器（macOS底部横线） */
.app-indicator {
  width: 4px;
  height: 4px;
  background-color: #007aff; /* macOS蓝色 */
  border-radius: 2px;
  margin-top: 6px;
  /* 指示器动画 */
  transition: width 0.2s ease;
}

.app-item:hover .app-indicator {
  width: 24px; /* hover时变宽 */
}

/* 深色模式适配（更接近macOS深色模式） */
@media (prefers-color-scheme: dark) {
  .dock-container {
    background: rgba(28, 28, 28, 0.7);
    border-color: rgba(255, 255, 255, 0.05);
  }
  
  .dock-fade.left {
    background: linear-gradient(90deg, rgba(28, 28, 28, 0.7) 0%, rgba(28, 28, 28, 0) 100%);
  }
  
  .dock-fade.right {
    background: linear-gradient(270deg, rgba(28, 28, 28, 0.7) 0%, rgba(28, 28, 28, 0) 100%);
  }
  
  .app-icon {
    background-color: rgba(255, 255, 255, 0.08);
  }
}

/* 小屏幕适配（保持比例） */
@media (max-width: 768px) {
  .dock-container {
    height: 48px;
    border-radius: 16px;
  }
  
  .app-icon {
    width: 34px;
    height: 34px;
  }
  
  .app-list {
    gap: 8px;
  }
}

/* 触摸设备优化 */
@media (pointer: coarse) {
  .app-item {
    --scale: 1.1 !important; /* 触摸时缩放幅度减小 */
  }
}
</style>